<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>02.简易留言板</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				width: 700px;
				height: 500px;
				background: url(./images/actualCombatCases/bg.jpg) no-repeat;
				background-size: cover;
				margin: 150px auto;
				text-align: center;
				overflow: auto;
			}
			
			textarea {
				border: 2px solid #534590;
				width: 360px;
				height: 130px;
				background: #fff;
				border-radius: 8px;
				resize: none;
				margin-top: 118px;
				padding: 5%;
				box-sizing: border-box;
				font-size: 16px;
			}
			
			ul {
				list-style: none;
			}
			
			button {
				display: block;
				width: 100px;
				height: 30px;
				border: 2px solid #fff;
				background: #14afd0;
				font-size: 14px;
				line-height: 30px;
				font-family: "微软雅黑";
				border-radius: 12px;
				color: #fff;
				margin-left: 430px;
			}
			
			#list {
				width: 360px;
				margin: 17px 0 0 170px;
			}
			
			#list li {
				height: 40px;
				margin-bottom: 12px;
				background: #554892;
				border-radius: 12px;
				color: #fff;
				padding-left: 20px;
				box-sizing: border-box;
				line-height: 40px;
				text-align: left;
			}
		</style>
		<script>
			window.onload = function () {
				// 获取元素
				var oWrap = document.querySelectorAll(".wrap")[0];
				var oText = oWrap.getElementsByTagName("textarea")[0];
				var oBtn = oWrap.getElementsByTagName("button")[0];
				var oUl = oWrap.getElementsByTagName("ul")[0];
				
				// console.log(oText, oBtn, oUl);
				
				// 页面一初始化就将光标聚焦到input输入框上
				oText.focus ();
				
				oBtn.addEventListener("click", function () {
					if ( oText.value == '' ) {
						alert("请输入点东东，再点提交，谢谢！");
					} else {
						// 加的内容是尾部push的
						// oUl.innerHTML += '<li>' + oText.value + '</li>';
						// 加的内容是头部unshift进去的
						oUl.innerHTML = '<li>' + oText.value + '</li>' + oUl.innerHTML;
						// 每次输完内容把textarea里的内容清空下，等待下一次输入
						oText.value = '';
					}
				}, false);
				
				/**
				 * 当用户停留在输完textarea框之后，相当于给用户一个便捷操作，通过
				 * 纯原生js的主动触发点击回车键就相当于用户点击了提交留言按钮一样
				 * 当然拉，用jQuery的trigger()主动触发方法那实现起来是太过于简单了，
				 * 挺好！
				 */
				oText.addEventListener("keydown", function (ev) {
					// 获取兼容的事件对象
					var oEvent = ev || window.event;	
					// 如果用户按了回车键，那么开始执行操作
					if (  oEvent.keyCode == 13 ) {
						// 阻止下默认行为
						oEvent.preventDefault ();
						// console.log('很好，您按了回车键');
						var evObj = document.createEvent ("MouseEvents");
						// 这里的click可以换成你想触发的行为
						evObj.initEvent ('click', true, true);　
						// 这里的oBtn可以换成你想触发行为的DOM结点
						oBtn.dispatchEvent (evObj); 
					}
				}, false);
			};
		</script>
	</head>
	<body>
		<div class="wrap">
			<textarea></textarea>
			<button>提交</button>
			<ul id="list"></ul>
		</div>
	</body>
</html>